/* 右侧外观设置
 * SurfaceTab.jsx
 */
import React, { Component, PropTypes } from 'react';

import {upCompAttr,upCompSurface,upCompAnimation,upCompEvent} from '../../../actions/h5/ComponentAction';
import {updatePageAttr} from '../../../actions/h5/PageAction';
import {listMusic,listImage,listFile,clearPageIdArr} from '../../../actions/FileHandleAction';
import {upH5Attr} from '../../../actions/h5/H5Action';

import {FONTS,ANIMATIONS} from '../../../utils/H5constants';
import UploadComponent from '../../../components/UploadComponent.jsx';
import {getImageWH} from '../../../utils/H5helper';

 //外观设置Tab
class SurfaceTab extends Component{
	constructor(props){
		super(props);
	}

	editCompSurface(name,value){
		const compId=this.props.currentComp.get('id');
		this.props.dispatch(upCompSurface(this.props.pageId,compId,{[name]:value}));
		//设置选中框
		const surface=this.props.currentComp.get('surface').set(name,value);
		const comp=this.props.currentComp.set('surface',surface);
		this.props.setSelectComp(comp);
	}

	render(){
		const surface=this.props.currentComp.get('surface');
		
		let bgShow='none';
		let borderShow='block';
		let borderTypeShow='block';
		const compType=this.props.currentComp.get('type');//组件类型
		switch(compType){
			case 'label':
				bgShow='block';
				break;
			case 'image':
				bgShow='none';
				break;
			case 'input':
				bgShow='none';
				borderTypeShow='none';
				break;
			case 'textarea':
				bgShow='none';
				borderTypeShow='none';
				break;
			case 'select':
				bgShow='none';
				borderShow='none';
				break;
			default:
				bgShow='none';
				borderTypeShow='none';
				borderShow='none';
		}

		return(
			<div className="panel-group">
				<h4 className="ui header">位置和尺寸</h4>
				<div className="input-group">
				  <span className="input-group-addon">&emsp;X 坐标</span>
				  <input type="number" className="form-control input-sm"  step="1" min="0" value={surface.get('x')} onChange={(e)=>{this.editCompSurface('x',e.target.value)}} />
				</div>
				
				<div className="input-group">
				  <span className="input-group-addon">&emsp;Y 坐标</span>
				  <input type="number" className="form-control input-sm"  step="1" min="0" value={surface.get('y')} onChange={(e)=>{this.editCompSurface('y',e.target.value)}} />
				</div>

				<div className="input-group">
				  <span className="input-group-addon">&emsp;宽度&emsp;</span>
				  <input type="number" className="form-control input-sm"  step="1" min="0" value={surface.get('width')} onChange={(e)=>{this.editCompSurface('width',e.target.value)}} />
				</div>

				<div className="input-group">
				  <span className="input-group-addon">&emsp;高度&emsp;</span>
				  <input type="number" className="form-control input-sm"  step="1" min="0" value={surface.get('height')}  onChange={(e)=>{this.editCompSurface('height',e.target.value)}} />
				</div>
				
				<div className="ui divider"></div> 
				<h4 className="ui header">旋转</h4>
				<div className="input-group">
					<span className="input-group-addon">&emsp;角度&emsp;</span>
					<span className="input-group-addon ranger">
						<input type="range" step="1"  min="-360" max="360" value={surface.get('rotate')} onChange={(e)=>{this.editCompSurface('rotate',e.target.value)}} />
					</span>
					<input type="number" className="form-control input-sm" step="1"  min="-360" max="360" value={surface.get('rotate')} onChange={(e)=>{this.editCompSurface('rotate',e.target.value)}} />
				</div>

				<div className="ui divider"></div>
				<h4 className="ui header">样式</h4>
				<div className="input-group">
					<span className="input-group-addon">不透明度</span>
					<span className="input-group-addon ranger">
						<input type="range" step="0.05" min="0" max="1" value={surface.get('opacity')}  onChange={(e)=>{this.editCompSurface('opacity',e.target.value)}} />
					</span>
					<input type="number" className="form-control input-sm" step="0.05" min="0" max="1" value={surface.get('opacity')}  onChange={(e)=>{this.editCompSurface('opacity',e.target.value)}} />
				</div>
				<div style={{display:bgShow}}>
					<div className="input-group">
						<span className="input-group-addon">背景颜色</span>
						<input type="color" value={surface.get('background')} onChange={(e)=>{this.editCompSurface('background',e.target.value)}} />
					</div>
				</div>

				<div className="ui divider"></div>
				<div style={{display:borderShow}}>
					<h4 className="ui header">边框</h4>
					<div style={{display:borderTypeShow}}>
						<div className="input-group">
						  <span className="input-group-addon">边线类型</span>
						  <select className="form-control input-sm" value={surface.get('border')} onChange={(e)=>{this.editCompSurface('border',e.target.value)}} >
						  	<option value="solid">实线</option> 
							<option value="double">双线</option>
							<option value="dashed">虚线</option>
							<option value="dotted">点线</option>
						  </select>
						</div>
					</div>

					<div className="input-group">
						<span className="input-group-addon">边线颜色</span>
						<input type="color" value={surface.get('borderColor')} onChange={(e)=>{this.editCompSurface('borderColor',e.target.value)}} />
					</div>
					
					<div className="input-group">
						<span className="input-group-addon">边线宽度</span>
						<span className="input-group-addon ranger">
							<input type="range" step="0.5" min="0" max="10" value={surface.get('borderSize')} onChange={(e)=>{this.editCompSurface('borderSize',e.target.value)}} />
						</span>
						<input type="number" className="form-control input-sm" step="0.5" min="0" max="10" value={surface.get('borderSize')} onChange={(e)=>{this.editCompSurface('borderSize',e.target.value)}} />
					</div>

					<div className="input-group">
					  <span className="input-group-addon">圆角半径</span>
					  <input type="number" className="form-control input-sm"  step="1" min="0" value={surface.get('borderRadius')} onChange={(e)=>{this.editCompSurface('borderRadius',e.target.value)}} />
					</div>

				</div>
			</div>
		);
	}
}

export default SurfaceTab;